<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Login</title>
		<!-- CSS only -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<section class="vh-100" style="background-color: #9a616d">
			<div class="container py-5 h-100">
				<div class="row d-flex justify-content-center align-items-center h-100">
					<div class="col col-xl-10">
						<div class="card" style="border-radius: 1rem">
							<div class="row g-0">
								<div class="col-md-6 col-lg-5 d-none d-md-block">
									<img
										src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/img1.webp"
										alt="login form"
										class="img-fluid"
										style="border-radius: 1rem 0 0 1rem"
									/>
								</div>
								<div class="col-md-6 col-lg-7 d-flex align-items-center">
									<div class="card-body p-4 p-lg-5 text-black">
										<form action="/login" method="POST">
											<div class="d-flex align-items-center mb-3 pb-1">
												<i
													class="fas fa-cubes fa-2x me-3"
													style="color: #ff6219"
												></i>
												<span class="h1 fw-bold mb-0">Logo</span>
											</div>

											<h5
												class="fw-normal mb-3 pb-3"
												style="letter-spacing: 1px"
											>
												Sign into your account
											</h5>
											<% if (messages.error) { %>
											<div class="alert alert-danger">
												<strong><%= messages.error %></strong>
											</div>
											<% } %>
											<div data-mdb-input-init class="form-outline mb-4">
												<input
													type="email"
													name="email"
													id="form2Example17"
													class="form-control form-control-lg"
												/>
												<label class="form-label" for="form2Example17"
													>Email address</label
												>
											</div>

											<div data-mdb-input-init class="form-outline mb-4">
												<input
													type="password"
													name="password"
													id="form2Example27"
													class="form-control form-control-lg"
												/>
												<label class="form-label" for="form2Example27"
													>Password</label
												>
											</div>

											<div class="pt-1 mb-4">
												<button
													data-mdb-button-init
													data-mdb-ripple-init
													class="btn btn-dark btn-lg btn-block"
													type="submit"
												>
													Login
												</button>
											</div>

											<a class="small text-muted" href="#!">Forgot password?</a>
											<p class="mb-5 pb-lg-2" style="color: #393f81">
												Don't have an account?
												<a href="/register" style="color: #393f81"
													>Register here</a
												>
											</p>
											<a href="#!" class="small text-muted">Terms of use.</a>
											<a href="#!" class="small text-muted">Privacy policy</a>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- JavaScript Bundle with Popper -->
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
			crossorigin="anonymous"
		></script>
	</body>
</html>
